<template>
  <div class="home_type">
    <div class="type_item" @click="homeStore.changeSport('soccer')">
      <img
        v-if="homeState.activesport == 'soccer'"
        src="@/assets/type/soccer-active.png"
        style="width: 16px; height: 16px"
        alt=""
      />
      <img v-else src="@/assets/type/soccer.png" style="width: 16px; height: 16px" alt="" />
      <div style="margin-left: 4px" :style="homeState.activesport == 'soccer' ? 'color: #000;' : ''">
        {{languageJson.home?.soccer}}
      </div>
    </div>

    <div class="type_item" @click="homeStore.changeSport('basketball')">
      <img
        v-if="homeState.activesport == 'basketball'"
        src="@/assets/type/basketball-active.png"
        style="width: 16px; height: 16px"
        alt=""
      />
      <img v-else src="@/assets/type/basketball.png" style="width: 16px; height: 16px" alt="" />
      <div style="margin-left: 4px" :style="homeState.activesport == 'basketball' ? 'color: #000;' : ''">
        {{languageJson.home?.basketball}}
      </div>
    </div>
  </div>
</template>

<script setup>
const { homeStore, homeState } = inject('HomeStore')
const languageJson = inject('languageJson')
</script>

<style lang="scss" scoped>
.home_type {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .type_item {
    display: flex;
    align-items: center;
    margin-left: 16px;
    cursor: pointer;
    font-family: AlibabaPuHuiTi_2_65_;
    font-size: 14px;
    color: #666;
  }
}
</style>